<template>
  <div class="cPreviewLayout">
    <div v-if="itemType === 'element'" :style="getItemStyles" class="cMoveLayout">
      <DragComponent v-if="item.cmpType == 'component'" :widget="item" preview />
      <component v-else :is="item.component" :widget="item" preview></component>
    </div>
    <div v-if="itemType === 'element'">
      <div :style="getSublinePos" class="cMoveLayout">
        {{ "(" + getItemStyles2.left + "," + getItemStyles2.top + ")" }}
      </div>
      <div :style="getSublineX" class="cMoveLayout"></div>
      <div :style="getSublineY" class="cMoveLayout"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, watch, computed, inject, ref } from "vue";
import { XYCoord, useDragLayer } from "vue3-dnd";
import { toRefs } from "@vueuse/core";
import { designEditKey } from "@/hooks/lowcode/keys";
import type { TypeDesignProvide, TypeWidget } from "@/types/TypeDesign";

export default defineComponent({
  name: "DragLayout",
  props: {
    scorllTop: {
      type: Number,
      default: 0,
    },
  },
  emits: [],

  setup(props) {
    let { setDesignSelectWidget, initScreenPos , pageInfo} = inject(designEditKey) as TypeDesignProvide;

    const collect = useDragLayer((monitor) => ({
      item: monitor.getItem(),
      itemType: monitor.getItemType(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentOffset: monitor.getSourceClientOffset(),
      isDragging: monitor.isDragging(),
    }));
    const { itemType, isDragging, item, initialOffset, currentOffset } = toRefs(collect);

    const getItemStyles = computed(() => {
      const { x, y } = currentOffset.value as XYCoord;
      let left = Math.round(x - initScreenPos.value.x);
      let top = Math.round(y - initScreenPos.value.y) + props.scorllTop;
      return {
        left: `${left}px`,
        top: `${top}px`,
      };
    });

    const getItemStyles2 = computed(() => {
      const { x, y } = currentOffset.value as XYCoord;
      let left = Math.round(x - initScreenPos.value.x);
      let top = Math.round(y - initScreenPos.value.y) + props.scorllTop;
      return {
        left: left - pageInfo.value.left,
        top: top - pageInfo.value.top,
      };
    });

    const getSublineX = computed(() => {
      const { x, y } = currentOffset.value as XYCoord;
      let top = Math.round(y - initScreenPos.value.y) + props.scorllTop;
      return {
        left: "-50px",
        right: 0,
        top: `${top}px`,
        height: "1px",
        background: "#ff0000",
        zIndex: 100,
      };
    });

    const getSublineY = computed(() => {
      const { x, y } = currentOffset.value as XYCoord;
      let left = Math.round(x - initScreenPos.value.x);
      return {
        top: 0,
        bottom: 0,
        left: `${left}px`,
        width: "1px",
        background: "#ff0000",
        zIndex: 100,
      };
    });

    const getSublinePos = computed(() => {
      const { x, y } = currentOffset.value as XYCoord;
      let left = Math.round(x - initScreenPos.value.x);
      let top = Math.round(y - initScreenPos.value.y) + props.scorllTop;
      return {
        left: `${left + 8}px`,
        top: `${top - 22}px`,
        fontSize: "12px",
        color: "#333333",
        fontWeight: 500,
        zIndex: 100,
      };
    });

    return {
      getItemStyles,
      getItemStyles2,
      itemType,
      item,
      getSublineX,
      getSublineY,
      getSublinePos,
      pageInfo,
    };
  },
});
</script>

<style lang="scss" scoped>
.cPreviewLayout {
  pointer-events: none; //none ----- 元素不再是鼠标事件的目标，鼠标不再监听当前层，而去监听下一层中的元素
  .cMoveLayout {
    position: absolute;
  }
}
</style>
